<template>
  <el-table
    :data="ipVisits"
    :loading="loading"
    style="width: 100%"
    row-key="_id"
  >
    <el-table-column prop="sessionId" label="会话ID" width="200" show-overflow-tooltip />
    <el-table-column prop="createdAt" label="访问时间" width="180">
      <template #default="{ row }">
        {{ row.createdAt ? new Date(row.createdAt).toLocaleString() : '-' }}
      </template>
    </el-table-column>
    <el-table-column prop="url" label="访问URL" show-overflow-tooltip />
    <el-table-column prop="title" label="页面标题" width="150" show-overflow-tooltip />
    <el-table-column prop="device" label="设备" width="100" />
    <el-table-column prop="browser" label="浏览器" width="120" />
    <el-table-column prop="os" label="操作系统" width="120" />
    <el-table-column prop="ip" label="IP地址" width="140" />
    <el-table-column prop="isUnique" label="唯一访问" width="100">
      <template #default="{ row }">
        <el-tag :type="row.isUnique ? 'success' : 'info'">
          {{ row.isUnique ? '是' : '否' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="120" fixed="right">
      <template #default="{ row }">
        <el-button 
          type="primary" 
          size="small"
          @click="handleViewSession(row.sessionId)"
        >
          查看会话
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
interface Props {
  ipVisits?: any[]
  loading?: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  viewSession: [sessionId: string]
}>()

const handleViewSession = (sessionId: string) => {
  emit('viewSession', sessionId)
}
</script>

<style scoped lang="scss">
// 样式可以在这里添加
</style>

